<template>
    <view class="app-container order">
        <zzk-nav title="订单详情"></zzk-nav>
        <view class="order-box">
            <view class="order-block">
                <view class="line flexrow">
                    <image class="avatar" :src="order.clientAvatar" mode="aspectFill"></image>
                    <text class="txt value">{{ order.clientNickName }}</text>
                </view>
                <view class="order-flex flexrow">
                    <view class="imgbox">
                        <image class="img" :src="order.pictureOssPath" mode="aspectFill"></image>
                    </view>
                    <view class="text">
                        <view class="line flexrow">
                            <text class="txt label">租/售：</text>
                            <text class="txt value">{{ order.orderType === 'BUY' ? '售' : '租' }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">商品名称：</text>
                            <text class="txt value">{{ order.goodsName }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">订单数量：</text>
                            <text class="txt value">{{ order.quantity }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">已交付：</text>
                            <text class="txt value">{{ order.deliveredQuantity }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">订单状态：</text>
                            <text class="tag">{{ payStatus[order.payStatus] }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 待发货 -->
            <template v-if="order.logisticsStatus === 'WAITING_MERCHANT_DELIVERY' && order.merchantToDeliverQuantity > 0">
                <view class="order-block">
                    <view class="order-line flexrow" @tap="showLog = true">
                        <text class="label">发货方式</text>
                        <text class="value">{{ logisticsType[logistics].name }}</text>
                        <uni-icons type="right" size="20" color="#999"></uni-icons>
                    </view>
                </view>
                <view class="order-block" v-for="(item, index) in dvlist" :key="index">
                    <view class="title flexrow">
                        <text class="tit">第{{ index + 1 }}批货物</text>
                        <text class="del" v-if="index > 0" @tap="delDelivery(index)">删除</text>
                    </view>
                    <view class="order-input flexrow">
                        <view>
                            <text class="label">商品描述</text>
                        </view>
                        <view class="input">
                            <up-input v-model="item.itemDesc" placeholder="请输入商品描述" fontSize="14" border="none" clearable />
                        </view>
                    </view>
                    <view class="order-input flexrow">
                        <view>
                            <text class="label">发货数量</text>
                        </view>
                        <view class="input">
                            <up-input v-model="item.itemQuantity" placeholder="请输入发货数量" type="number" fontSize="14" border="none" clearable>
                                <template #suffix>
                                    <text class="unit">个/台</text>
                                </template>
                            </up-input>
                        </view>
                    </view>
                    <view class="order-input flexrow">
                        <view>
                            <text class="label">联系方式</text>
                        </view>
                        <view class="input">
                            <up-input v-model="item.receiverContact" placeholder="请输入收件人联系方式" fontSize="14" border="none" clearable />
                        </view>
                    </view>
                    <template v-if="logisticsType[logistics].value === 'LOGISTICS'">
                        <view class="order-input flexrow">
                            <view>
                                <text class="label">物流公司</text>
                            </view>
                            <view class="input">
                                <up-input v-model="item.expressCompany" placeholder="请输入物流公司" fontSize="14" border="none" clearable></up-input>
                            </view>
                        </view>
                        <view class="order-input flexrow">
                            <view>
                                <text class="label">物流单号</text>
                            </view>
                            <view class="input">
                                <up-input v-model="item.trackingNo" placeholder="请输入物流单号" fontSize="14" border="none" clearable></up-input>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="order-link">
                    <text class="txt" @tap="addDelivery">添加发货 +</text>
                </view>
            </template>
        </view>
        <u-gap height="72"></u-gap>
        <!-- 待发货 -->
        <zzk-bottom v-if="order.logisticsStatus === 'WAITING_MERCHANT_DELIVERY' && order.merchantToDeliverQuantity > 0">
            <view class="order-bottom flexrow">
                <!-- <view class="num">
                    <text class="txt">数量：{{ sendGoods.quantity || 0 }}</text>
                </view> -->
                <up-button text="确认发货" type="error" :customStyle="{ margin: 0, width: '160rpx', height: '72rpx' }" :loading="loading" @click="toDeliver"></up-button>
            </view>
        </zzk-bottom>
        <up-picker :show="showLog" :columns="[logisticsType]" keyName="name" @cancel="showLog = false" @confirm="getLogistics"></up-picker>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderInfo, orderDeliver } from '@/api/order.js'
import { payStatus } from '@/utils/status'
import { showToast, backpage } from '@/utils/util'

const id = ref('')
const type = ref('')
const order = ref({})
const loading = ref(false)

// 配送方式
const logisticsType = ref([
    { name: '商家配送上门', value: 'MERCHANT_SEND' },
    { name: '客户自提', value: 'CLIENT_SELF_PICKUP' },
    { name: '物流快递', value: 'LOGISTICS' }
])
const logistics = ref(0)
const showLog = ref(false)

// 发货列表
const dvlist = ref([
    {
        expressCompany: '',
        trackingNo: '',
        itemDesc: '',
        itemQuantity: '',
        receiverContact: '',
    }
])

// 换货id
const applyId = ref('')

onLoad((option) => {
    id.value = option.id
    if (option.type) {
        type.value = option.type
    }
    if (option.applyId) {
        applyId.value = option.applyId
    }
    getInfo()
})

const getInfo = () => {
    orderInfo(id.value).then(res => {
        order.value = res
    })
}

const getLogistics = (e) => {
    logistics.value = e.indexs[0]
    showLog.value = false
}

// 添加发货
const addDelivery = () => {
    dvlist.value.push({
        expressCompany: '',
        trackingNo: '',
        itemDesc: '',
        itemQuantity: '',
        receiverContact: '',
    })
}

// 删除发货
const delDelivery = (index) => {
    dvlist.value.splice(index, 1)
}

const toDeliver = () => {
    const data = {}
    let reg = /^(0|[1-9]\d*)$/
    dvlist.value.forEach((item, index) => {
        if (!item.itemDesc) {
            showToast(`请输入第${index + 1}批货物的商品描述`)
            return false
        } else if (!reg.test(item.itemQuantity)) {
            showToast(`第${index + 1}批货物的数量输入不正确`)
            return false
        } else if (logisticsType.value[logistics.value].value === 'LOGISTICS') {
            if (!item.expressCompany) {
                showToast(`请输入第${index + 1}批货物的物流公司`)
                return false
            } else if (!item.trackingNo) {
                showToast(`请输入第${index + 1}批货物的物流单号`)
                return false
            }
        }
    })
    data.logisticsType = logisticsType.value[logistics.value].value
    data.orderId = id.value
    if (type.value === 'BUY') {
        data.type = 'CLIENT_BUY_FROM_MERCHANT'
    } else if (type.value === 'LEASE') {
        data.type = 'CLIENT_LEASE_FROM_MERCHANT'
    } else if (type.value === 'EXCHANGE') {
        data.type = 'CLIENT_EXCHANGE_FROM_MERCH'
    }
    data.shippingList = dvlist.value
    if (applyId.value) {
        data.applyId = applyId.value
    }
    
    loading.value = true
    orderDeliver(data).then(res => {
        loading.value
        uni.$emit('refresh_order')
        showToast('发货成功', () => {
            backpage()
        })
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.order {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    &-box {
        padding: 20rpx $zzk-margin 0;
    }
    &-block {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;
        .tit {
            flex: 1;
            line-height: 48rpx;
            font-size: 32rpx;
        }
        .del {
            font-size: 28rpx;
            line-height: 48rpx;
            color: $u-error;
        }
        .avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 16rpx;
        }
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
            &.label {
                color: #999;
            }
        }
        .tag {
            font-size: 24rpx;
            line-height: 48rpx;
            padding: 0 8rpx;
            background-color: $u-info-light;
            color: $u-info;
            border-radius: 4rpx;
        }
    }
    &-flex {
        padding-top: 20rpx;
        .img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            display: block;
        }
        .text {
            flex: 1;
            padding-left: 20rpx;
        }
    }
    &-line {
        align-items: center;
        height: 80rpx;
        .label {
            font-size: 28rpx;
            flex: 1;
            color: #999;
            line-height: 40rpx;
        }
        .value {
            font-size: 28rpx;
            line-height: 40rpx;
            &.red {
                color: $u-error;
            }
        }
    }
    &-input {
        align-items: center;
        height: 80rpx;
        .label {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
            width: 140rpx;
        }
        .input {
            flex: 1;
        }
        .unit {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #999;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        justify-content: flex-end;
        align-items: center;
        .txt {
            font-size: 28rpx;
            color: #333;
            padding-right: 20rpx;
        }
    }
    &-link {
        .txt {
            font-size: 28rpx;
            color: $u-primary;
            line-height: 48rpx;
            text-align: center;
        }
    }
}
</style>